<template>
  <div style="padding: 20px;">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>提交任务数</span>
        </div>
      </template>
      <el-row :gutter="20">
        <el-col :span="12"><div class="grid-content ep-bg-purple" />
          <el-table :data="[initData]" border style="width: 100%" >
            <el-table-column prop="commitSumDay" label="当日" align="center">
              <template #default="scope">
                <span style="color: cornflowerblue">{{ scope.row.commitSumDay || 0 }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="commitSumMonth" label="当月" align="center">
              <template #default="scope">
                <span style="color: cornflowerblue">{{ scope.row.commitSumMonth || 0 }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="commitSumSeason" label="当季" align="center">
              <template #default="scope">
                <span style="color: cornflowerblue">{{ scope.row.commitSumSeason || 0 }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="commitSumYear" label="当年" align="center">
              <template #default="scope">
                <span style="color: cornflowerblue">{{ scope.row.commitSumYear || 0 }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="12">
          <el-table :data="[initData]" border style="width: 100%">
            <el-table-column prop="commitSum" label="待审核任务数" align="center">
              <template #default="scope">
                <span style="color: cornflowerblue">{{ scope.row.commitSum || 0 }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="publishedSum" label="发布任务数" align="center">
              <template #default="scope">
                <span style="color: cornflowerblue">{{ scope.row.publishedSum || 0 }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="finishedSum" label="完成任务数" align="center">
              <template #default="scope">
                <span style="color: cornflowerblue">{{ scope.row.finishedSum || 0 }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="unCommitSum" label="未提交任务数" align="center">
              <template #default="scope">
                <span style="color: cornflowerblue">{{ scope.row.unCommitSum || 0 }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-card>
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="12"><div class="grid-content ep-bg-purple" />
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>代理商任务排名</span>
              
              <div style="cursor: pointer;"><span :class="{'set-clolor': agencytasType == 1}" @click="agencytaskcli(1)">当月</span>/<span @click="agencytaskcli(2)" :class="{'set-clolor': agencytasType == 2}">当季</span>/<span @click="agencytaskcli(3)" :class="{'set-clolor': agencytasType == 3}">当年</span></div>
            </div>
          </template>
          <div style="height: 425px;overflow-y: auto;">
            <div class="table_all">
              <div style="flex: none !important;width: 100px;display: flex;align-items: center;justify-content: center;" >
                <div></div>
              </div>
              <div></div>
              <div>申请数</div>
              <div>完成数</div>
              <div>完成比</div>
            </div>
            <div class="table_all" v-for="(item, index) in agencytaskList" :key="index">
              <div style="flex: none !important;width: 100px;display: flex;align-items: center;justify-content: center;" >
                <div :class="{
                'colorB': index<=2,
                'border_color': true
              }">{{ index + 1 }}</div>
              </div>
              <div>{{ item.agencyName }}</div>
              <div>{{ item.appliedSum }}</div>
              <div>{{ item.finishedSum }}</div>
              <div>{{ item.percent * 100 }}%</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>任务各类完成排名</span>
              <div style="cursor: pointer;"><span :class="{'set-clolor': listtaskType == 1}" @click="listtaskFuncli(1)">当月</span>/<span :class="{'set-clolor': listtaskType == 2}" @click="listtaskFuncli(2)">当季</span>/<span :class="{'set-clolor': listtaskType == 3}" @click="listtaskFuncli(3)">当年</span></div>
            </div>
          </template>
          <div style="height: 425px;overflow-y: auto;">
            <div class="table_all" v-for="(item, index) in listtaskList" :key="index">
              <div style="flex: none !important;width: 100px;display: flex;align-items: center;justify-content: center;" >
                <div :class="{
                'colorB': index<=2,
                'border_color': true
              }">{{ index + 1 }}</div>
              </div>
              <div>{{ item.name }}</div>
              <div></div>
              <div></div>
              <div>{{ item.percent * 100 }}%</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="12"><div class="grid-content ep-bg-purple" />
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>任务提交完成数</span>
            </div>
          </template>
          <div>
            <div id="main" ref="usedmemory" style="width: 800px;height: 520px;padding: 10px" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>各类任务完成百分比</span>
            </div>
          </template>
          <div>
            <div id="mainacce" ref="usedmemory" style="width: 800px;height: 520px;padding: 10px" />
          </div>
        </el-card>
      </el-col>
    </el-row>
    
  </div>
</template>
<script setup>
  import { homepageList, agencytask, listtask } from "@/api/apihome";

  import * as echarts from 'echarts';
  import { onMounted, watchEffect } from 'vue'
  // /task/homepage/list

  const cache = ref([]);
  // const commandstats = ref(null);

  const { proxy } = getCurrentInstance();
  const option = ref({})
  const mainacceoption = ref({})
  const initFun = () => {
    var chartDom = document.getElementById('main');
    var mainacce = document.getElementById('mainacce');
    const usedmemoryInstance = echarts.init(chartDom);
    const mainacceInstance = echarts.init(mainacce);
    mainacceInstance.showLoading();
    usedmemoryInstance.showLoading();
    let data = []
    initData.value.taskFinishedList.forEach((item) => {
      data.push({
        value: item.percent || 0, 
        name: item.name
      })
    })
    mainacceoption.value = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '5%',
        left: 'center'
      },
      series: [
        {
          name: '百分比',
          type: 'pie',
          radius: ['60%', '40%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '40',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: data
        }
      ]
    }
    let dataTime = ref([])
    let dataTj = ref([])
    let dataSh = ref([])
    initData.value.taskMonthList.forEach((val) => {
      dataTime.value.push(val.month)
      dataTj.value.push(val.committedSum)
      dataSh.value.push(val.finishedSum)
    })
    option.value = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
          label: {
            show: true
          }
        }
      },
      calculable: true,
      legend: {
        data: ['Growth', '提交任务数', '审核任务数'],
        itemGap: 5
      },
      grid: {
        top: '12%',
        left: '1%',
        right: '10%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: dataTime.value //obama_budget_2012.names
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: '任务提交完成数',
          nameTextStyle: {
            padding: [0, 0, 0, 30],
            // color: 'red',
          },
          axisLabel: {
            formatter: function (a) {
              a = +a;
              return  isFinite(a) ? echarts.format.addCommas(+a) : '';
            }
          }
        }
      ],
      dataZoom: [
        {
          show: false,
          start: 0,
          end: 100
        },
        {
          type: 'inside',
          start: 0,
          end: 100
        },
      ],
      series: [
        {
          name: '提交任务数',
          type: 'bar',
          data: dataTj.value
        },
        {
          name: '审核任务数',
          type: 'bar',
          data: dataSh.value
        }
      ]
    };
    usedmemoryInstance.setOption(option.value)
    usedmemoryInstance.hideLoading();
    mainacceInstance.setOption(mainacceoption.value)
    mainacceInstance.hideLoading();
  }
  
  onMounted(() => {
    
  })
  function getList() {
    proxy.$modal.loading("正在加载缓存监控数据，请稍候！");
    getCache().then(response => {
      proxy.$modal.closeLoading();
      cache.value = response.data;
  
      const commandstatsIntance = echarts.init(commandstats.value, "macarons");
      commandstatsIntance.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        series: [
          {
            name: "命令",
            type: "pie",
            roseType: "radius",
            radius: [15, 95],
            center: ["50%", "38%"],
            data: response.data.commandStats,
            animationEasing: "cubicInOut",
            animationDuration: 1000
          }
        ],
      });
  
      const usedmemoryInstance = echarts.init(usedmemory.value, "macarons");
      usedmemoryInstance.setOption({
        tooltip: {
          formatter: "{b} <br/>{a} : " + cache.value.info.used_memory_human
        },
        series: [
          {
            name: "峰值",
            type: "gauge",
            min: 0,
            max: 1000,
            detail: {
              formatter: cache.value.info.used_memory_human
            },
            data: [
              {
                value: parseFloat(cache.value.info.used_memory_human),
                name: "内存消耗"
              }
            ]
          }
        ],
      })
    })
  }
  const initData = ref([])
  const homepageListFun = () => {
    homepageList().then((res) => {
      console.log('fasdg24123525', res)
      initData.value = res.data
      initFun()
    })
  }
  homepageListFun()
  // getList();
  // 代理商任务排名
  const agencytaskList = ref([])
  const agencytaskFun = (flag) => {
    agencytask({
      flag, // 	flag:1当月;2当季;3当年
    }).then((res) => {
      agencytaskList.value = res.data
    })
  }
  agencytaskFun(1)
  const agencytasType = ref(1)
  const agencytaskcli = (type) => {
    agencytasType.value = type
    agencytaskFun(type)
  }
  const listtaskList = ref([])
  const listtaskFun = (flag) => {
    listtask({
      flag, // 	flag:1当月;2当季;3当年
    }).then((res) => {
      listtaskList.value = res.data
    })
  }
 const listtaskType = ref(1)
  const listtaskFuncli = (type) => {
    listtaskType.value = type
    listtaskFun(type)
  }
  listtaskFuncli(1)

  // const as = ref(1)
  // watchEffect(() => {
  //   console.log('fasd42512', as.value)
  // })

  // setTimeout(() => {
  //   as.value = 3
  // }, 2000)
  </script>
  <style scoped lang="scss">
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .text {
      font-size: 14px;
    }

    .item {
      margin-bottom: 18px;
    }

    .box-card {
      width:100%
    }
    .table_all{
      display: flex;
      margin: 30px 0;
      height: 30px;
      align-items: center;
      div {
        flex: 1;
        text-align: center;
      }
    }
    .border_color {
      color: #fff;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      text-align: center;
      line-height: 30px;
      flex: none !important;
      background-color: gainsboro;
    }
    .colorB {
      color: #fff;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      text-align: center;
      line-height: 30px;
      background-color: rgb(100, 200, 251);
      flex: none !important;
    }
    .set-clolor {
      color: rgb(100, 200, 251);;
    }
  </style>